<template>
  <div class="holidays-container">

    
    <div class="calendar-header">
      <div class="month-selector">
        <button @click="prevMonth">上个月</button>
        <div class="year-month">{{ currentYear }} 年 {{ currentMonth }} 月</div>
        <button @click="nextMonth">下个月</button>
      </div>
      <div class="actions">
        <button class="today-btn" @click="goToToday">今天</button>
      </div>
    </div>
    
    <div class="calendar">
      <div class="weekdays">
        <div class="weekday">一</div>
        <div class="weekday">二</div>
        <div class="weekday">三</div>
        <div class="weekday">四</div>
        <div class="weekday">五</div>
        <div class="weekday weekend">六</div>
        <div class="weekday weekend">日</div>
      </div>
      
      <div class="days">
        <div 
          v-for="day in calendarDays" 
          :key="day.date" 
          class="day-cell"
          :class="{ 
            'other-month': !day.isCurrentMonth,
            'weekend': day.isWeekend,
            'today': day.isToday,
            'holiday': day.isHoliday,
            'workday': day.isWorkday
          }"
          @contextmenu.prevent="handleRightClick(day)"
        >
          <div class="day-number">{{ day.dayOfMonth }}</div>
          <div class="day-status" v-if="day.isCurrentMonth && (day.isHoliday || day.isWorkday)">
            {{ day.isHoliday ? '休' : (day.isWorkday ? '班' : '') }}
          </div>
          <div class="lunar-day">{{ day.lunarDay }}</div>
          <div class="holiday-name" v-if="day.holidayName">{{ day.holidayName }}</div>
        </div>
      </div>
    </div>
    
    <div class="legend">
      <div class="legend-item"><span class="color-box workday"></span>上班</div>
      <div class="legend-item"><span class="color-box holiday"></span>休息</div>
      <div class="legend-item"><span class="color-box weekend"></span>周末</div>
    </div>

    <!-- 添加 Element Plus Dialog -->
    <el-dialog
      v-model="dialogVisible"
      title="节假日设置"
      width="400px"
      :close-on-click-modal="false"
      destroy-on-close
      class="holiday-dialog"
    >
      <div class="dialog-content">
        <el-form :model="holidayForm" label-width="70px" class="holiday-form">
          <el-form-item label="日期" class="form-item">
            <el-date-picker
              v-model="holidayForm.date"
              type="date"
              placeholder="选择日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              :disabled="true"
              class="date-picker"
            />
          </el-form-item>
          <el-form-item label="类型" class="form-item">
            <div class="custom-radio-group">
              <label class="custom-radio" :class="{ 'active': holidayForm.type === 0 }">
                <input type="radio" v-model="holidayForm.type" :value="0">
                <span class="radio-text holiday">休假</span>
              </label>
              <label class="custom-radio" :class="{ 'active': holidayForm.type === 1 }">
                <input type="radio" v-model="holidayForm.type" :value="1">
                <span class="radio-text workday">上班</span>
              </label>
            </div>
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer">
        <el-button plain class="cancel-btn" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" class="confirm-btn" @click="handleSave">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { ElMessage } from 'element-plus'
import axios from 'axios';
import { Lunar } from 'lunar-javascript';

export default {
  name: 'Holidays',
  data() {
    return {
      currentDate: new Date(),
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      apiHolidays: [], // 存储从API获取的节假日数据
      loading: false,
      // 公历节日
      solarFestivals: {
        '1-1': '元旦',
        '2-14': '情人节',
        '3-8': '妇女节',
        '3-12': '植树节',
        '4-1': '愚人节',
        '4-5': '清明节',
        '5-1': '劳动节',
        '5-4': '青年节',
        '6-1': '儿童节',
        '7-1': '建党节',
        '8-1': '建军节',
        '9-10': '教师节',
        '10-1': '国庆节',
        '12-25': '圣诞节'
      },
      dialogVisible: false,
      holidayForm: {
        date: '',
        type: null
      },
      selectedDay: null
    };
  },
  computed: {
    calendarDays() {
      const days = [];
      const year = this.currentYear;
      const month = this.currentMonth;
      
      // 获取当月第一天
      const firstDay = new Date(year, month - 1, 1);
      // 获取当月最后一天
      const lastDay = new Date(year, month, 0);
      
      // 获取当月第一天是星期几 (0是星期日，1是星期一)
      let firstDayOfWeek = firstDay.getDay();
      if (firstDayOfWeek === 0) firstDayOfWeek = 7; // 调整为周一为1，周日为7
      
      // 添加上个月的日期
      const prevMonthLastDay = new Date(year, month - 1, 0).getDate();
      for (let i = firstDayOfWeek - 1; i > 0; i--) {
        const dayObj = this.createDayObject(
          new Date(year, month - 2, prevMonthLastDay - i + 1)
        );
        dayObj.isCurrentMonth = false;
        days.push(dayObj);
      }
      
      // 添加当月的日期
      for (let i = 1; i <= lastDay.getDate(); i++) {
        days.push(this.createDayObject(new Date(year, month - 1, i)));
      }
      
      // 添加下个月的日期，补齐日历
      const remainingDays = 42 - days.length; // 6行7列 = 42个日期单元格
      for (let i = 1; i <= remainingDays; i++) {
        const dayObj = this.createDayObject(new Date(year, month, i));
        dayObj.isCurrentMonth = false;
        days.push(dayObj);
      }
      
      return days;
    },
    
    // 计算当前年份的法定节假日和调休安排
    holidayArrangement() {
      const year = this.currentYear;
      const arrangement = this.calculateHolidayArrangement(year);
      return arrangement;
    }
  },
  methods: {
    createDayObject(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const dayOfWeek = date.getDay();
      const dateString = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
      const today = new Date();
      const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
      const apiHoliday = this.apiHolidays.find(h => {
        const apiDate = h.holidaysTime ? h.holidaysTime.substring(0, 10) : '';
        return apiDate === dateString;
      });
      const isHoliday = apiHoliday && apiHoliday.holidaysType === 0;
      const isWorkday = apiHoliday && apiHoliday.holidaysType === 1;
      const holidayId = apiHoliday ? apiHoliday.id : 0;
      const lunarInfo = this.getLunarInfo(date);
      // 只用权威库和公历节日
      let holidayName = '';
      // 公历节日优先
      const solarFestival = this.solarFestivals[`${month}-${day}`] || '';
      if (solarFestival) {
        holidayName = solarFestival;
      } else if (lunarInfo.festival) {
        holidayName = lunarInfo.festival;
      }
      return {
        date: dateString,
        dayOfMonth: day,
        isWeekend,
        isHoliday,
        isWorkday,
        isCurrentMonth: true,
        isToday: today.getDate() === day && today.getMonth() === date.getMonth() && today.getFullYear() === year,
        lunarDay: lunarInfo.lunarDay,
        holidayName: holidayName,
        holidayId: holidayId
      };
    },

    // 从API加载节假日数据
    loadHolidaysFromAPI() {
      this.loading = true;
      
      axios({
        method: "get",
        url: "/api/SchedulingManagementServices/GetHolidays"
      })
      .then(res => {
        console.log('获取到的节假日数据:', res);
        
        // 根据控制台截图中的数据结构进行处理
        if (res && res.data && res.data.data && Array.isArray(res.data.data)) {
          this.apiHolidays = res.data.data;
          console.log('处理后的节假日数据:', this.apiHolidays);
        } else if (res && res.data && Array.isArray(res.data)) {
          this.apiHolidays = res.data;
          console.log('处理后的节假日数据:', this.apiHolidays);
        } else {
          console.warn('API返回的数据格式不符合预期:', res);
          this.apiHolidays = [];
        }
        
        this.loading = false;
      })
      .catch(err => {
        console.error('加载节假日数据失败:', err);
        this.loading = false;
        this.apiHolidays = [];
        
        if (this.$message) {
          this.$message.error('获取节假日数据失败，请检查网络连接');
        } else {
          alert('获取节假日数据失败，请检查网络连接');
        }
      });
    },
    
    // 检查日期是否在API节假日列表中
    checkApiHolidayStatus(date) {
      const dateString = this.formatDate(date);
      
      // 查找匹配的节假日记录
      const holiday = this.apiHolidays.find(h => {
        // 支持两种可能的日期格式
        const apiDate = h.holidaysTime ? h.holidaysTime.substring(0, 10) : '';
        const isMatch = apiDate === dateString;
        
        // 如果是6月1日，添加调试日志
        if (dateString === '2025-06-01' || dateString === '2025-06-03') {
          console.log(`检查日期 ${dateString} 与API日期 ${apiDate}, 匹配结果: ${isMatch}`);
          console.log('节假日数据:', h);
        }
        
        return isMatch;
      });
      
      if (holiday) {
        // 添加调试日志
        if (dateString === '2025-06-01' || dateString === '2025-06-03') {
          console.log(`日期 ${dateString} 找到匹配, 类型: ${holiday.holidaysType}`);
        }
        
        return {
          isHoliday: holiday.holidaysType === 0,
          isWorkday: holiday.holidaysType === 1,
          name: '',
          id: holiday.id  // 添加id字段
        };
      }
      
      return {
        isHoliday: false,
        isWorkday: false,
        name: '',
        id: 0  // 默认id为0
      };
    },
    
    // 获取节假日信息 (修改以优先使用API数据)
    getHolidayInfo(date) {
      const year = date.getFullYear();
      const month = date.getMonth() + 1;
      const day = date.getDate();
      const dateString = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
      
      // 首先检查API数据
      const apiStatus = this.checkApiHolidayStatus(date);
      if (apiStatus.isHoliday || apiStatus.isWorkday) {
        return apiStatus;
      }
      
      // 如果API没有数据，使用本地计算
      // 获取当前年份的节假日安排
      const arrangement = this.holidayArrangement;
      
      // 查找是否是法定节假日
      const holiday = arrangement.holidays.find(h => h.date === dateString);
      if (holiday) {
        return {
          isHoliday: true,
          isWorkday: false,
          name: holiday.name,
          id: 0  // 本地计算的假日没有id
        };
      }
      
      // 查找是否是调休工作日
      const isAdjustedWorkday = arrangement.adjustedWorkdays.includes(dateString);
      if (isAdjustedWorkday) {
        return {
          isHoliday: false,
          isWorkday: true,
          name: '调休',
          id: 0  // 本地计算的工作日没有id
        };
      }
      
      return {
        isHoliday: false,
        isWorkday: false,
        name: '',
        id: 0  // 默认id为0
      };
    },
    
    // 计算节假日和调休安排
    calculateHolidayArrangement(year) {
      const holidays = [];
      const adjustedWorkdays = [];

      // 元旦（1月1日）
      holidays.push({ date: `${year}-01-01`, name: '元旦' });

      // 春节（农历正月初一）及相关假期
      const springFestival = Lunar.fromYmd(year, 1, 1).getSolar();
      const springFestivalDate = new Date(springFestival.getYear(), springFestival.getMonth() - 1, springFestival.getDay());
      const springFestivalEve = new Date(springFestivalDate);
      springFestivalEve.setDate(springFestivalDate.getDate() - 1);
      holidays.push({ date: this.formatDate(springFestivalEve), name: '除夕' });
      for (let i = 0; i < 7; i++) {
        const festivalDate = new Date(springFestivalDate);
        festivalDate.setDate(springFestivalDate.getDate() + i);
        holidays.push({ date: this.formatDate(festivalDate), name: i === 0 ? '春节' : '春节假期' });
      }

      // 清明节（节气推算）
      const qingming = Lunar.fromYmd(year, 4, 4).getJieQiTable()['清明'] || Lunar.fromYmd(year, 4, 5).getJieQiTable()['清明'] || Lunar.fromYmd(year, 4, 6).getJieQiTable()['清明'];
      let qingmingDate;
      if (qingming) {
        qingmingDate = new Date(qingming.getYear(), qingming.getMonth() - 1, qingming.getDay());
      } else {
        // 兜底：公历4月5日
        qingmingDate = new Date(year, 3, 5);
      }
      holidays.push({ date: this.formatDate(qingmingDate), name: '清明节' });
      for (let i = 1; i < 3; i++) {
        const qingmingHoliday = new Date(qingmingDate);
        qingmingHoliday.setDate(qingmingDate.getDate() + i);
        holidays.push({ date: this.formatDate(qingmingHoliday), name: '清明节假期' });
      }

      // 劳动节（5月1日）及假期
      holidays.push({ date: `${year}-05-01`, name: '劳动节' });
      for (let i = 1; i < 5; i++) {
        const laborDate = new Date(year, 4, 1 + i);
        holidays.push({ date: this.formatDate(laborDate), name: '劳动节假期' });
      }

      // 端午节（农历五月初五）
      const dragonBoat = Lunar.fromYmd(year, 5, 5).getSolar();
      const dragonBoatDate = new Date(dragonBoat.getYear(), dragonBoat.getMonth() - 1, dragonBoat.getDay());
      holidays.push({ date: this.formatDate(dragonBoatDate), name: '端午节' });
      for (let i = 1; i < 3; i++) {
        const dragonBoatHoliday = new Date(dragonBoatDate);
        dragonBoatHoliday.setDate(dragonBoatDate.getDate() + i);
        holidays.push({ date: this.formatDate(dragonBoatHoliday), name: '端午节假期' });
      }

      // 中秋节（农历八月十五）
      const midAutumn = Lunar.fromYmd(year, 8, 15).getSolar();
      const midAutumnDate = new Date(midAutumn.getYear(), midAutumn.getMonth() - 1, midAutumn.getDay());
      holidays.push({ date: this.formatDate(midAutumnDate), name: '中秋节' });
      for (let i = 1; i < 3; i++) {
        const midAutumnHoliday = new Date(midAutumnDate);
        midAutumnHoliday.setDate(midAutumnDate.getDate() + i);
        holidays.push({ date: this.formatDate(midAutumnHoliday), name: '中秋节假期' });
      }

      // 国庆节（10月1日）及假期
      holidays.push({ date: `${year}-10-01`, name: '国庆节' });
      for (let i = 1; i < 7; i++) {
        const nationalDate = new Date(year, 9, 1 + i);
        holidays.push({ date: this.formatDate(nationalDate), name: '国庆节假期' });
      }

      // 计算调休日期（通常是节假日前后的周末）
      this.calculateAdjustedWorkdays(springFestivalDate, 7, adjustedWorkdays);
      this.calculateAdjustedWorkdays(qingmingDate, 3, adjustedWorkdays);
      this.calculateAdjustedWorkdays(new Date(year, 4, 1), 5, adjustedWorkdays);
      this.calculateAdjustedWorkdays(dragonBoatDate, 3, adjustedWorkdays);
      this.calculateAdjustedWorkdays(midAutumnDate, 3, adjustedWorkdays);
      this.calculateAdjustedWorkdays(new Date(year, 9, 1), 7, adjustedWorkdays);

      return { holidays, adjustedWorkdays };
    },
    
    // 计算调休工作日
    calculateAdjustedWorkdays(holidayStart, days, adjustedWorkdays) {
      // 计算节假日前后的周末，如果需要调休
      const needAdjustedDays = Math.ceil(days / 2); // 假设需要调休的天数
      
      // 节假日前的周末
      let beforeDate = new Date(holidayStart);
      let adjustedCount = 0;
      
      // 向前查找周末
      for (let i = 1; i <= 7 && adjustedCount < needAdjustedDays; i++) {
        beforeDate.setDate(holidayStart.getDate() - i);
        const dayOfWeek = beforeDate.getDay();
        
        // 如果是周末，设为调休工作日
        if (dayOfWeek === 0 || dayOfWeek === 6) {
          adjustedWorkdays.push(this.formatDate(beforeDate));
          adjustedCount++;
        }
      }
      
      // 如果前面的周末不够，再找节假日后的周末
      if (adjustedCount < needAdjustedDays) {
        const afterDate = new Date(holidayStart);
        afterDate.setDate(holidayStart.getDate() + days);
        
        for (let i = 0; i < 14 && adjustedCount < needAdjustedDays; i++) {
          afterDate.setDate(afterDate.getDate() + 1);
          const dayOfWeek = afterDate.getDay();
          
          // 如果是周末，设为调休工作日
          if (dayOfWeek === 0 || dayOfWeek === 6) {
            adjustedWorkdays.push(this.formatDate(afterDate));
            adjustedCount++;
          }
        }
      }
    },
    
    // 格式化日期为 YYYY-MM-DD
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    
    // 获取农历信息
    getLunarInfo(date) {
      const lunar = Lunar.fromDate(date);
      const lunarDay = lunar.getMonthInChinese() + lunar.getDayInChinese();
      // 节日优先级：农历节日 > 其他农历节日 > 节气
      const festival = lunar.getFestivals().join('') || lunar.getOtherFestivals().join('') || lunar.getJieQi() || '';
      return {
        lunarDay,
        festival
      };
    },
    
    prevMonth() {
      if (this.currentMonth === 1) {
        this.currentYear--;
        this.currentMonth = 12;
      } else {
        this.currentMonth--;
      }
      // 切换月份后重新加载节假日数据
      this.loadHolidaysFromAPI();
    },
    
    nextMonth() {
      if (this.currentMonth === 12) {
        this.currentYear++;
        this.currentMonth = 1;
      } else {
        this.currentMonth++;
      }
      // 切换月份后重新加载节假日数据
      this.loadHolidaysFromAPI();
    },
    
    goToToday() {
      const today = new Date();
      this.currentYear = today.getFullYear();
      this.currentMonth = today.getMonth() + 1;
      // 返回今天后重新加载节假日数据
      this.loadHolidaysFromAPI();
    },
    
    // 切换日期单元格显示（仅显示，不修改）
    toggleDayStatus(day) {
      // 此方法保留但不执行任何操作，因为我们只需要显示数据
      console.log('点击了日期:', day.date);
      // 不执行任何修改操作
    },
    
    // 调试方法：检查关键日期的状态
    debugCheckDates() {
      console.log('===== 调试信息 =====');
      console.log('API节假日数据:', this.apiHolidays);
      
      // 检查几个关键日期
      const testDates = [
        new Date(2025, 5, 1),  // 5月1日
        new Date(2025, 5, 3),  // 5月3日
        new Date(2025, 5, 5),  // 5月5日
      ];
      
      testDates.forEach(date => {
        const dateString = this.formatDate(date);
        const status = this.checkApiHolidayStatus(date);
        console.log(`日期 ${dateString} 状态:`, status);
      });
      
      console.log('===================');
    },

    // 添加新的方法
    handleRightClick(day) {
      this.selectedDay = day;
      this.dialogVisible = true;
      this.holidayForm.date = day.date;
      
      // 如果有已存在的假期设置，则显示对应的类型
      if (day.isHoliday) {
        this.holidayForm.type = 0; // 假
        this.holidayForm.id = day.holidayId || 0; // 设置ID
      } else if (day.isWorkday) {
        this.holidayForm.type = 1; // 班
        this.holidayForm.id = day.holidayId || 0; // 设置ID
      } else {
        this.holidayForm.type = null;
        this.holidayForm.id = 0; // 新增时ID为0
      }
    },

    handleSave() {
      if (this.holidayForm.type === null) {
        ElMessage.warning('请选择假期类型');
        return;
      }

      // 构造请求数据
      const requestData = {
        id: this.holidayForm.id || 0,  // 使用表单中的ID
        holidaysTime: this.holidayForm.date,
        holidaysType: this.holidayForm.type
      };
      
      console.log('保存节假日数据:', requestData); // 添加日志，方便调试

      // 调用后台接口
      axios({
        method: 'post',
        url: '/api/SchedulingManagementServices/CreateUpdateHolidays',
        data: requestData
      })
      .then(res => {
        if (res.data.status) {
          ElMessage.success('保存成功');
          this.dialogVisible = false;
          // 重新加载数据
          this.loadHolidaysFromAPI();
        } else {
          ElMessage.error(res.data.message || '保存失败');
        }
      })
      .catch(err => {
        console.error('保存失败:', err);
        ElMessage.error('保存失败，请检查网络连接');
      });
    }
  },

  


  mounted() {
    // 初始化
    this.goToToday();
    // 加载API节假日数据
    this.loadHolidaysFromAPI();
    
    // 添加调试信息
    console.log('日历组件已加载，正在获取节假日数据...');
    
    // 延迟检查关键日期的状态
    setTimeout(() => {
      this.debugCheckDates();
    }, 2000);
  }
};
</script>

<style scoped>
.holidays-container {
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.calendar-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
  position: relative;
}

.month-selector {
  display: flex;
  align-items: center;
  gap: 20px;
  justify-content: center;
}

.year-month {
  font-size: 18px;
  font-weight: bold;
  min-width: 150px;
  text-align: center;
}

.actions {
  position: absolute;
  right: 0;
}

.calendar {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #f5f5f5;
  border-bottom: 1px solid #e0e0e0;
}

.weekday {
  padding: 10px;
  text-align: center;
  font-weight: bold;
}

.weekend {
  color: #ff4d4f;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

.day-cell {
  border: 1px solid #e0e0e0;
  padding: 8px;
  position: relative;
  min-height: 100px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.day-cell:hover {
  background-color: #f0f0f0;
}

.day-number {
  font-size: 16px;
  font-weight: bold;
}

.other-month {
  color: #aaa;
  background-color: #f9f9f9;
}

.today {
  background-color: #e6f7ff;
  border: 1px solid #1890ff;
}

.holiday {
  background-color: #fff1f0;
}

.workday {
  background-color: #f6ffed;
}

.day-status {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
}

.holiday .day-status {
  background-color: #ff4d4f;
  color: white;
}

.workday .day-status {
  background-color: #52c41a;
  color: white;
}

.lunar-day {
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

.holiday-name {
  font-size: 12px;
  color: #ff4d4f;
  margin-top: 5px;
  font-weight: bold;
}

.legend {
  display: flex;
  gap: 20px;
  margin-top: 20px;
  justify-content: center;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.color-box {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.color-box.workday {
  background-color: #f6ffed;
  border: 1px solid #52c41a;
}

.color-box.holiday {
  background-color: #fff1f0;
  border: 1px solid #ff4d4f;
}

.color-box.weekend {
  background-color: #f9f9f9;
  border: 1px solid #d9d9d9;
}

button {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #d9d9d9;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s;
}

button:hover {
  border-color: #1890ff;
  color: #1890ff;
}

.today-btn {
  background-color: #1890ff;
  color: white;
  border-color: #1890ff;
}

.today-btn:hover {
  background-color: #40a9ff;
  color: white;
}

.dialog-content {
  padding: 20px;
}

.holiday-form {
  width: 100%;
}

.form-item {
  margin-bottom: 25px;
}

:deep(.form-item .el-form-item__label) {
  font-weight: 500;
  color: #333;
}

.date-picker {
  width: 100%;
}

.custom-radio-group {
  display: flex;
  gap: 20px;
}

.custom-radio {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}

.custom-radio input {
  display: none;
}

.radio-text {
  padding: 6px 20px;
  border-radius: 4px;
  font-size: 14px;
  transition: all 0.3s;
}

.radio-text.holiday {
  background-color: #ffeaea;
  color: #ff4d4f;
}

.radio-text.workday {
  background-color: #f0f9eb;
  color: #67c23a;
}

.custom-radio.active .radio-text.holiday {
  background-color: #ff4d4f;
  color: white;
}

.custom-radio.active .radio-text.workday {
  background-color: #67c23a;
  color: white;
}

.dialog-footer {
  padding: 10px 20px 20px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

.cancel-btn {
  width: 80px;
  height: 32px;
  padding: 0;
  border: 1px solid #dcdfe6;
  color: #606266;
}

.confirm-btn {
  width: 80px;
  height: 32px;
  padding: 0;
  background-color: #409eff;
  border-color: #409eff;
  color: white;
}

:deep(.el-dialog__header) {
  margin-right: 0;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
}

:deep(.el-dialog__body) {
  padding: 20px 0;
}

:deep(.el-dialog__footer) {
  display: none;
}

:deep(.el-dialog__headerbtn) {
  top: 15px;
}

:deep(.date-picker) {
  width: 100%;
}

:deep(.el-input__wrapper) {
  background-color: #f5f7fa;
}

:deep(.el-dialog) {
  border-radius: 4px;
  overflow: hidden;
}

/* 防止右键菜单出现 */
.day-cell {
  user-select: none;
}
</style>

